<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <script type="text/javascript">
            function changeToText()
            {
                document.getElementById('textLayer').style.display = '';
                document.getElementById("textLayer").value = '';
                document.getElementById('textLayer').focus();
            }
            
            function changeToSelect()
            {
                document.getElementById('textLayer').style.display = 'none';
            }
            function go(valueIn)
            {
                document.getElementById('selectLayer').value = valueIn;
                document.getElementById('textLayer').value = valueIn;
                alert(valueIn);
            }

            

        </script>
    </head>
    <body>
      
        <div style="height: 100px"></div>
        <span id="spanLayer" style="position: absolute;z-index: 2;width: 102px;height: 20px;" onclick="changeToText()">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <select id="selectLayer" onclick="changeToSelect()" style="width: 120px; position: absolute;z-index: 1;" onchange="go(this.value)">
            <option value="10">10</option> 
            <option value="20">20</option> 
            <option value="30">30</option> 
            <option value="40">40</option> 
            <option value="50">50</option> 
        </select>
        <input id ="textLayer" type="text" onkeydown= "if(event.keyCode==13){go(this.value);}" style="width: 102px;position: absolute;z-index: 3;display: none;" />
    </body>
</html>


